<template>
    <div>
      <div class="bg-white grid-content">
      <el-form :inline="true" :model="CyjsbdaForm" class="demo-form-inline">
    <el-date-picker  style="top:15px"
      v-model="value1"
      type="daterange"
      value-format='yyyy-MM-dd'
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      unlink-panels>
    </el-date-picker>
        <el-form-item>
          <el-button type="primary"   @click="reload">查询</el-button>
          <el-button type="success"   @click="exportExcel">下载</el-button>
        </el-form-item>
      </el-form>
    </div>
      <div class="bg-white grid-content">
        <div style="overflow: hidden; ">
          <div class="mytitle"><svg-icon icon-class="Cyjsbda" class="myIcon" /> 抽油机保养档案</div>
          
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#909399'}">
          <el-table-column type="index" label="序号" :index="indexMethod">
          </el-table-column>
          <!-- <el-table-column align="center" prop="rq" label="日期">
          </el-table-column> -->
          <el-table-column align="center" prop="orgName" label="单位名称">
          </el-table-column>
          <el-table-column align="center" prop="jackName" label="抽油机名称">
          </el-table-column>
          <el-table-column align="center" prop="jlid" label="保养记录号">
          </el-table-column>
          <el-table-column align="center" prop="maintenancePeriod" label="保养期次">
          </el-table-column>
          <el-table-column align="center" prop="ksrq" label="开始保养时间">
          </el-table-column>
          <el-table-column align="center" prop="wcrq" label="完成时间">
          </el-table-column>
          <el-table-column align="center" prop="jgsj" label="与上次保养间隔时间">
          </el-table-column>
          <el-table-column align="center" prop="bygs" label="保养工时">
          </el-table-column>
          <el-table-column align="center" prop="zyxlnr" label="保养主要内容数据 （包括更换主要配件及试车结果）">
          </el-table-column>
          <el-table-column align="center" prop="byfzr" label="保养负责人">
          </el-table-column>
          <el-table-column align="center" prop="ysr" label="验收人">
          </el-table-column>
          <el-table-column align="center" prop="bz" label="备注">
          </el-table-column>
  
  <!-- 审核页面 -->
          <!-- <el-table-column align="center" fixed="right" prop="approveStatus" label="审核状态">
            <template slot-scope="scope">
              <el-tag
              :type="
                  scope.row.approveStatus == '1'
                    ? 'success'
                    : scope.row.approveStatus == '0'
                      ? 'info'
                      : 'danger'"
                disable-transitions>{{
                scope.row.approveStatus == '1'
                  ? '已通过'
                  : scope.row.approveStatus == '0'
                    ? '未审核'
                    : '未通过'
              }}</el-tag>
            </template>
          </el-table-column> -->
  
          
        </el-table>
        <!-- 分页器 -->
        <el-pagination align='right'
            background
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            :current-page="pageNo"
            :page-sizes="[5,10, 20, 30, 40, 50]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
      </div>
  
      <!-- 弹出框 -->
    </div>
  </template>
  
  <script>
  import CyjsbdaApi from '@/api/sjtb/scgl/cyjsbda';
  import Bolb from '@/vendor/Blob';
  import Export2Excel from '@/vendor/Export2Excel'
  export default {
    data() {
      return {
        pageNo: 1, //当前页码
        pageSize: 10, //每页显示数量
        total: 0, //总数量
        tableData:[],
        startDate:'',
        endDate:'', 
        // table数据
  
        //当前页码
        currentPage: 1,
        //表单填报的数据
        CyjsbdaForm: {
          id:'',
          rq:'',//日期
          zyq: '',//作业区
          sbmc: '',//设备名称
          byqc:'',//保养期次
          ksbysj: '',//开始保养时间
          wcsj: '',//完成时间
          yscbyjgsj: '',//与上次保养间隔时间
          bygs: '',//保养工时
          byzynrsj: '',//保养主要内容数据 （包括更换主要配件及试车结果）
          byfz: '',//保养负责人
          ysr:'',//验收人
          bz:'',//备注
          },
        //时间快捷选择
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1:'',
        //获取当前日期
        currentTime:'',
        //编辑框是否显示
        dialogFormVisible: false,
        //弹出框是否是查看
        ischeck: false,
        //控制查看时不可更改数据
        isInput:false,
        //弹出框标题
        myDialogTitle: '',
      }
    },
    created(){
      this.search();
    //this.getDataRq();
    this.reload();
    //this.exportExcel();
    },
    mounted(){
      this.filterTime();
      // this.initDate();
    },
    methods: {
      /**
      * 查询列表
      */
      async search() {
        // this.pageNo = pageNo; //当前页码
        // this.pageSize = pageSize; //每页显示数量
        //发送查询请求
        let res = await CyjsbdaApi.getList(this.pageNo,this.pageSize,this.startDate,this.endDate);
        //判断是否成功
        if(res.success){
          console.log(123456);
          console.log(res.data);
          //赋值
          this.tableData = res.data.records;
          //总数量
          this.total = res.data.total;
        }
      },
  
      exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel');//此处把路径要写对
        //复杂表头书写
          //添加表格id
          var myindex = [];
          for (var i = 0; i < this.total; i++) {
            myindex[i] = i + 1
          }
          var newindex = myindex.map(item => {
            console.log(item)
            return {
              index: item
            }
          });
           // //将添加的序号加入到表格中形成新的mergeArr表格
          let mergeArr = [newindex, this.tableData].reduce((prev, curr) => {
            return prev.map((item, index) => {
              return Object.assign(item, curr[index]);
            });
          });
          console.log('mergeArr', mergeArr);
          console.log('tableData', this.tableData);
  
          // const tHeader = ['日期', '姓名', '地址'];
          // // 上面设置Excel的表格第一行的标题
          //一级表头
           const multiHeader = [['抽油机设备档案','','','','','','','','','','','','']];
           //二级表头
           const header = ['序号',  '单位名称', '抽油机名称', '保养记录号','保养期次', '开始保养时间', '完成时间', '与上次保养间隔时间', '保养工时', '保养主要内容数据 （包括更换主要配件及试车结果', '保养负责人', '验收人', '备注'];
           //表头字段
           const filterVal = ['index', 'orgName', 'jackName', 'jlid','maintenancePeriod', 'ksrq', 'wcrq', 'jgsj', 'bygs', 'zyxlnr', 'byfzr', 'ysr', 'bz'];
           //需要合并的单元格
           const merges = ['A1:M1', ];
           //表头样式
           let headerStyle = ['A1','B1','C1','D1','E1','F1','G1','H1','I1','J1','K1','L1','M1'];
          // 上面的index、nickName、name是tableData里对象的属性
          console.log(this.tableData);
          // const list = this.tableData;  //把data里的tableData存到list
          // const data = this.formatJson(filterVal, list);
          const list = mergeArr;
          const data = this.formatJson(filterVal, list);
          console.log(111111);
          console.log(list);
          console.log(data);
  
          export_json_to_excel({
            //header: tHeader,
            multiHeader:multiHeader,
            header:header,
            merges:merges,
            headerStyle:headerStyle  ,
              data: data,
              filename: '抽油机设备档案',
              autoWidth: true,
              bookType: 'xlsx'
          });//"列表excel"  是下载后的表名 可修改
          this.$message.success('导出报表成功！')
        })
    },
    formatJson(filterVal, jsonData) {
       return jsonData.map(v => {
        return filterVal.map(j => v[j])
       })
    },
  
      // //每页条数改变时触发 选择一页显示多少行
      // handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      //   this.currentPage = 1;
      //   this.pageSize = val;
      // },
      // //当前页改变时触发 跳转其他页
      // handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      //   this.currentPage = val;
      // },
      /*** 当每页数量发生变化时触发该事件 */
      handleSizeChange(size) {
        console.log(size);
        this.pageSize = size;
        //将每页显示的数量交给成员变量
        this.search(this.pageNo, size);
      },
      /*** 当页码发生变化时触发该事件 */
      handleCurrentChange(page) {
        console.log(page);
        this.pageNo = page;
        //调用查询方法
        this.search(page, this.pageSize);
      },
      // 序号计算
      indexMethod (index) {
      // index默认在0开始，这里+1
        return index + 1 + (this.pageNo - 1) * this.pageSize
      },
      // 获取当前日期
      filterTime() {
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = date.getDate();
        d = d < 10 ? '0' + d : d;
        this.currentTime = y + '-' + m + '-' + d;
      },
      //日期查询点击事件
      reload(){
          this.tableData=[];
           
          console.log(1010); 
          console.log(this.value1[0]);//value1[0] 开始时间 value1[1] 结束时间 
          this.startDate = this.value1[0];
          this.endDate = this.value1[1]; 
          this.search(); 
        //  console.log(this.value1[0]);
          //this.$refs.table.reload({ page: 1 });
  
        },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  // 标题
  .mytitle {
    font-size: large;
    padding-left: 10px;
    margin-bottom: 16px;
    float: left;
  }
  
  //按钮组
  .myButtons {
    float: right
  }
  
  //格子的样式
  .bg-white {
    background: #ffffff;
  }
  
  .grid-content {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
  }
  
  .calendar ::v-deep .el-button-group::before {
    display: none;
  }
  
  .calendar ::v-deep .el-button-group::after {
    display: none;
  }
  
  // 分割线样式
  .el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
  }
  
  // 表单各项的样式
  .el-form-item {
    margin: 15px 10px 15px 10px;
  }
  
  //表单禁用字体样式
  .el-input.is-disabled ::v-deep .el-input__inner {
      color: #606266;
    }
  //对话框宽度
  // .customWidth{
  //         width:80%;
  //     }
  ::v-deep .saveAsDialog {
    width: 60% !important;
  }
  </style>